﻿/*Added comments    */
/*Added comments    */
/*Added comments    */

body, div, .ship-start:after { box-sizing:border-box; display:block; }

body, .box { position:relative; }
/*.ship-start.active { position: fixed; }*/
.ship-part, .bullet { position: absolute; }

.ship-spot, .ship-block { cursor:pointer; }

.ship-part, .ship-start:after { width:100%; height:100%; }

.ship-start:after   {  content:''; }

.ship-start:after, .ship-block, .ship-spot, .ship-spot:hover { border: 1px solid black; }
.ship-spot { border-color: grey; }


body                { height: 4000px;    width:4000px;                                            overflow:hidden; }
.box                { height: 4000px;   width: 4000px;  margin: 0px;            border: 3px solid gray; }
.bullet             { height: 30px;     width: 6px;     margin: -30px -15px;    border: 1px solid green; 
                        z-index: 100;                                                   transition: top 1s linear, left 1s linear; }
.ship-start         {                                   margin: -25px 0px 0px -25px;                        overflow: visible; 
                        z-index: 200;   background-color: rgba(128, 128, 128, 0.75); }


.ship-block { transition: all linear .5s; }
body, .box, .ship-start { transition: all linear .1s; }


.ship-start:hover, .ship-start.active { background-color: rgba(255, 0, 0, 0.5); }
.ship-block.yellow:hover, .ship-block { background-color: rgba(128, 128, 128, 0.5); }
.bullet, .ship-block:hover, .ship-block.green { background-color: rgba(76, 255, 0, 0.50); }
.ship-block.green:hover, .ship-block.blue { background-color: rgba(0, 29, 255, 0.50); }
.ship-block.blue:hover, .ship-block.yellow { background-color: rgba(255, 242, 0, 0.50); }
.ship-block.red { background-color: rgba(255, 0, 0, 0.5); }
.ship-spot:hover { background-color:rgba(128, 128, 128, 0.25); }

        
